<template>
<div class="tabbarcontrol">
  <div v-for="(item,index) in titles" :key=index class="tabbarcontrol-item" :class="{active:index===currentindex}" @click="controlcilck(index)" >
    <span>{{item}}</span>
  </div>



</div>

</template>

<script>
export default {
  name:"tabbarcontrol",
  props:{
    titles:{
      type:Array,
      default(){
        return[]
      }
    }
  },
  data(){
    return{
      currentindex:0
    }
  },methods:{
    controlcilck(index){
this.currentindex=index;
this.$emit("tabclick",index)
    }
  }


}
</script>

<style scoped>
.tabbarcontrol{
  display: flex;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
height: 40px;
  margin-right: -8px;

}
.tabbarcontrol-item{
flex: 1;
line-height: 40px;
height: 40px;
}

.active{
  color: pink;
}

.active span{
    border-bottom: 3px solid pink;
    padding-bottom: 5px;

}

</style>
